/* eslint-disable react/no-did-mount-set-state */
/* eslint-disable react/jsx-no-bind */
import { h, Component } from 'preact';
import { Link } from 'preact-router/match';
import Image from '../../components/Image';
import classNames from 'classnames';
// import style from './style.css';
import './index.scss';
import Icon from '../Icon';
import Menu from './Menu';
import MobileMenu from './MobileMenu';
import 'animate.css';

export default class Header extends Component {

	clickMenuIcon = _ => {
		this.mApi.toggle();
	}


	componentDidMount() {
		const { pathname } = window.location;
	}

	render(props, state) {
		return (
			<header className="navbar navbar-expand navbar-light bg-light blog-nav-header flex-column flex-md-row sticky-top">
				{/* <nav class="container"> */}
					
				<a className={classNames('navbar-brand',{ 'nav-menu-brand': props.isMobile })} href="#">
					<Image src={'assets/favicon.ico'} style={{ width: '45px',float: 'left',marginRight: '5px' }} />
					温的博客
				</a>
				<h2 onClick={this.clickMenuIcon} class={classNames('navbar-toggler-icon nav-menu-tool',{ hidden: !props.isMobile })} />
				{/* <div className="modal-backdrop fade show">

				</div> */} 
				<div ref={r => this.ref=r} className={classNames('navbar-nav-scroll')}>
					{props.isMobile?<MobileMenu onReady={api=>this.mApi = api} />:<Menu />}
				</div>
				<ul  className={classNames('navbar-nav ml-md-auto',{ hidden: props.isMobile })} >
					<li className="nav-item">
						<form class=" form-inline my-2 my-lg-0">
							<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
							<div class="input-group-prepend">
								<Icon type="search" color="#d2b9b9" />
							</div>
						</form>
					</li>
				</ul>
				{/* </nav> */}
			</header >
		);
	}
}